<template>
  <div class="contentSwiper">
    <com-header right-icon='shareIcon'>
      <div slot='title' class="titleText">
        <div class="avatar"
             :style="{backgroundImage:`url(${userInfo ? userInfo.avatar : ''})`}"></div>
        <div class="text">{{userInfo ? userInfo.name:''}}</div>
      </div>
    </com-header>
    <div class="swiper-container" v-swiper:swiper="swiperOption" ref="swiperContent">
      <div class="swiper-wrapper" v-if='raindrop'>
        <div class="swiper-slide" v-for="(item, index) in raindrop" :key="index">
          <watefall :raindropItem='item'/>
        </div>
      </div>
      <div class="swiper-pagination swiperSelf" style="bottom: 112px"></div>
    </div>
  </div>
</template>
<script>
  import { mapGetters, mapActions } from 'Vuex'
  import ComHeader from '../../components/common/Header'
  import Watefall from '../../components/Raindrop/Waterfall'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    layout: 'other',
    components: { Watefall, ComHeader },
    props: {},
    data() {
      return {
        raindropInfo: [],
        userInfo: null,
        // 所有配置均为可选（同Swiper配置）
        swiperOption: {
          notNextTick: true,
          pagination: {//分页
            el: '.swiper-pagination',//添加分页
            dynamicBullets: true//动态指示点
          },
          on: {
            //监听滑动切换事件，返回swiper对象
            slideChange: () => {

            }
          }
        }
      }
    },
    swiper() {
      // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
      return this.$refs.swiperContent.swiper
    },
    computed: {
      isUid() {
        return this.$route.params.uid
      },
      // ...mapGetters([
      //   'raindropList',
      // ])
    },
    created() {
      this._renderAllLinker()
    },
    mounted() {
      // console.log(this.raindropList)
    },
    computed: {
      picLength() {
        return this.raindrop.length > 1 ? true : false
      },
      raindrop: {
        get: function() {
          return this.raindropInfo
        },
        set: function(type) {
          this.raindropInfo = type
        }
      }
    },
    methods: {
      //获取所有的raindrop
      async _renderAllLinker() {
        this.userInfo = JSON.parse(Cookie.get('userInfo'))
        const params = {
          sid: Cookie.get('sid'),
          uid: this.$route.params.uid
        }
        let res = await api.getAllLinker(params)
        // console.log(res)
        if (res.status == 0) {
          // this.$store.commit('_setraindropList',res.data)
          this.raindrop = res.data.splice(0,10)
        } else {
          Toast(res.info)
        }
      }
    }
  }
</script>
<style lang="scss">
  .contentSwiper {
    height: calc(100% - 88px);
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    height: 100%;
    font-size: 18px;
    display: flex;
    justify-content: center;
  }

  .contentInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("") no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .swiper-pagination {
    height: 30px;
    bottom: 10px;

    .swiper-pagination-bullet {
      width: 14px !important;
      height: 14px !important;
      border-radius: 50% !important;
    }

    .swiper-pagination-bullet-active {
      background-color: aqua;
    }
  }

</style>
